<template>
  <div id="app" class="app-page">
    <root>
      <safe-header
        v-bind="{
          title: '出库任务列表',
          isBack: true,
          backIconColor: '#fff',
          fixedTop: true,
        }"
      />
      <div>
        <v-container>
          <v-row>
            <v-col :cols="12" class="pb-0">
              <!-- <v-autocomplete
              v-model="value"
              color="white"
              item-text="name"
              item-value="id"
              label="State"
              hide-details
              :items="states"
              :filter="customFilter"
              @change="chooseConditions"
            ></v-autocomplete> -->
              <v-text-field
                dense
                :prepend-inner-icon="mdiMagnify"
                v-model="value"
                solo
                hide-details
                placeholder="请输入出库任务号进行查询"
                keydown.13="conditionsEnter"
                @input="inputConditions"
                style="font-size: 14px"
              ></v-text-field>
            </v-col>
          </v-row>
        </v-container>
        <v-container width:80%>
          <v-card
            class="mx-auto my-2 list_card"
            max-width="374"
            v-for="item in deliveryOrderList"
            :key="item.code"
            outlined
            @click="warehouseOrderClick(item)"
            style="board: thin solid #cacbcc"
          >
            <v-card-title class="pb-3 card-title"
              ><v-row>
                <v-col cols="10" class="py-0 px-1 d-flex align-center"
                  >{{ item.billNo
                  }}<span class="ms-2 card-tag">{{
                    item.statesLabel
                  }}</span></v-col
                >
                <v-col
                  class="text-right py-0 pr-0 d-flex align-center justify-end"
                >
                  <div class="icon-triangle"></div>
                </v-col> </v-row
            ></v-card-title>
            <v-divider class="my-0 card-sp-line"></v-divider>

            <v-card-text>
              <v-row class="d-flex flex-row justify-space-between">
                <v-col cols="3" class="py-1 px-1 card-lable">创建时间</v-col>
                <v-col class="ms-1 py-1 text-right card-value">
                  {{ item.createTime }}
                </v-col>
              </v-row>
              <v-row>
                <v-col cols="3" class="py-1 px-1" style="color: #999999"
                  >计划日期</v-col
                >
                <v-col class="ms-2 py-1 text-right" style="color: #666666">
                  {{ item.orderTime }}
                </v-col>
              </v-row>
              <v-row>
                <v-col cols="3" class="py-1 px-1" style="color: #999999"
                  >客户</v-col
                >
                <v-col class="ms-2 py-1 text-right" style="color: #666666">
                  {{ item.customerName }}
                </v-col>
              </v-row>
              <v-row>
                <v-col cols="3" class="py-1 px-1" style="color: #999999"
                  >备注</v-col
                >
                <v-col class="ms-2 py-1 text-right" style="color: #666666">
                  {{ item.memo }}
                </v-col>
              </v-row>
            </v-card-text>
          </v-card>
        </v-container>
      </div>
    </root>
  </div>
</template>

<script>
import SafeHeader from "../../components/safeHeader_wms";
import Storage from "@/utils/storage.js";
import wms from "../../utils/http.js";
import { apiList } from "@/static/apiList";
import Root from "@/components/Root.vue";
import { mdiMagnify } from "@mdi/js";
// import qs from "qs";

export default {
  name: "DeliveryOrderList",
  components: {
    SafeHeader,
    Root,
  },
  data() {
    return {
      mdiMagnify: mdiMagnify,
      value: "",
      states: [
        { name: "NCONV1001841201612", id: "NCONV1001841201612" },
        { name: "NCONV1001841201613", id: "NCONV1001841201613" },
        { name: "NCONV1001841201614", id: "NCONV1001841201614" },
        { name: "NCONV1001841201615", id: "NCONV1001841201615" },
        { name: "NCONV1001841201616", id: "NCONV1001841201616" },
      ],
      // infoList: [],
      // 出库单列表
      deliveryOrderList: [],
    };
  },
  computed: {},
  methods: {
    // // 自动补全过滤
    // customFilter(item, queryText) {
    //   // 选择项   输入的查询字段   显示值(name)
    //   const textOne = item.name.toLowerCase();
    //   const textTwo = item.abbr.toLowerCase();
    //   const searchText = queryText.toLowerCase();
    //   return (
    //     textOne.indexOf(searchText) > -1 || textTwo.indexOf(searchText) > -1
    //   );
    // },
    // // 选中值发生变化时调
    // chooseConditions(text) {
    //   // 更改下方列表
    //   this.deliveryOrderList = this.infoList.filter((item) => {
    //     if (item.code.includes(text)) {
    //       return item;
    //     }
    //   });
    // },

    inputConditions(e) {
      console.log(e);
    },

    // 获取列表
    getListData() {
      console.log(123);
    },
    warehouseOrderClick(item) {
      console.log(`----------------------------------------${item.soMasterId}`);
      if (window.navigator.userAgent.toLowerCase().includes("apicloud")) {
        window.api.sendEvent({
          name: "PickingByOrder_two", //PickingByOrder_new
          extra: {
            billNo: item.billNo,
            billId: item.soMasterId
          },
        });
        window.api.openWin({
          name: "PickingByOrder_two",
          url: "./PickingByOrder_two.html",
          pageParam: {
            billNo: item.billNo,
            billId: item.soMasterId
          },
        });
      } else {
        this.$root.api.api.sendEvent({
          name: "PickingByOrder_two",
          extra: {
            billNo: item.billNo,
            billId: item.soMasterId
          },
        });
        this.$root.api.api.openWin({
          name: "PickingByOrder_two",
          url: "./PickingByOrder_two.html",
          pageParam: {
            billNo: item.billNo,
            billId: item.soMasterId
          },
        });
      }
    },
    conditionsEnter() {
      console.log("111111111");
    },
  },
  mounted() {
    let params = {
      wareId: localStorage.getItem("wareId"),
      states: "0,4", //已分配
      soType: this.$root.api.api.pageParam.soBilType,
    };
    //获取出库任务列表
    wms.get({ url: "/so/masters/list", data: params }).then((res) => {
      this.infoList = res.data.data.list;
      let soStates = apiList.soStates;
      this.infoList.forEach((item) => {
        soStates.forEach((val) => {
          if (item.state == val.value) {
            item.statesLabel = val.label;
          }
        });
      });
      console.log(JSON.stringify(this.infoList));
      this.deliveryOrderList = this.infoList;
    });
  },
};
</script>

<style lang="scss" scoped>
.icon-triangle {
  position: absolute;
  height: 24px;
  border: 12px solid transparent;
  border-left: 12px solid #dcdcde;
}
</style>
